<template>
  <div>
    <el-row>
<!--      <h2>增加用户</h2>-->
      <el-col :span="20" :offset="2">

        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="工作组">
            <el-input v-model="form.password"></el-input>
          </el-form-item>

          <el-form-item label="用户状态">
            <el-select v-model="form.status" placeholder="请选择用户状态">
              <el-option v-for="userStatus in userStatusList" :label="userStatus.userStatus"
                         :value="userStatus.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {mapActions, mapState} from "vuex";

export default {
  name: "UserAdd",

  data() {
    return {
      form: {
        username: '',
        password: '',
        status: '',
      },

    }
  },
  created() {
    this.getUserStatusList();
  },
  methods: {
    ...mapActions({
      getUserStatusList: "getUserStatusList",

    }),
    onSubmit(){
      console.log(this.form)
      this.axios.post('/api/user/',this.form).then(res=>{
        console.log(res)
        if(res.status === 201){
          this.$message.success('创建用户 ' + res.data.name + '成功')
          this.$router.push('/userlist')
        }
        else{
          this.$message.error("发生一些错误，状态码：" +res.status )
        }
      }).catch(reason => {
        console.log(reason)
      })
    }

  },
  computed: {
    ...mapState({
      // statusList: state => state.statusList,
      userStatusList: state => state.userStatusList,
    })
  }
}
</script>

<style scoped>

</style>
